// 这个就是layui的模块化处理的独特之处，用哪个模块就调用哪个模块
layui.use(function () {
    var $ = layui.jquery,
        table = layui.table,
        layer = layui.layer, //弹层
        element = layui.element; //元素操作

    table.render({
        title: '用户数据表',
        elem: '#userList',
        id: 'userTable',
        url: "/users/list/",
        //默认一页展示多少条数据
        limit: 10,
        //设置可选项，每页显多少条数据
        limits: [10, 20, 30, 50],
        // 每一列写入的数据，后端传来的参数填写进去
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'userId', title: 'ID', sort: true, fixed: 'left', width: 80},
            {field: 'userName', title: '用户名', width: 150},
            {field: 'userEmail', title: '邮箱', width: 200},
            {field: 'userStatus', title: '状态', width: 100},
            {field: 'userRole', title: '角色', sort: true, width: 150},
            {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo'},

        ]],
        // 开启分页
        page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],     // 自定义分页布局
            curr: 1,      // 设置默认起始页1
            groups: 10,   //只显示10个连续页码,就是说显示10个可见页其他的省略
            first: '首页', // 不显示首页 false
            last: '尾页',   // 不显示尾页 false
        },
        toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        defaultToolbar: ['exports', 'print'],
    });
    // 带条件查询

    var $ = layui.$, active = {
        reload: function () {
            var userName = $('#userName').val();
            var userStatus = $('#userStatus').val();
            //执行重载
            table.reload('userTable', {
                url: "/users/searchList/",
                page: {
                    curr: 1,
                    limits: [1]
                },
                where: {
                    userName: userName,
                    userStatus: userStatus
                }
            }, 'data');
        }
    };

    // 绑定搜索事件
    $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    //监听头工具栏事件
    table.on('toolbar(userList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'addData':
                    layer.open({
                        type: 2,
                        title: ["添加用户", "color:red;"],//不显示标题可以设置false
                        closeBtn: 1,//0代表不显示右上角关闭按钮
                        shadeClose: false,
                        area: ['50%', '60%'],
                        content: '/users/showAdd/',
                    });
                    break;
                case 'deleteCheckData':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    }
                    var ids = [];
                    for (i = 0; i < data.length; i++) {
                        ids[i] = data[i].userId;
                    }
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/users/dels/',
                        data: {
                            ids: JSON.stringify(ids)
                        },
                        type: 'POST',
                        success: function (data) {
                            if (data.code === 0) {
                                window.location.reload();//刷新页面
                            }
                            layer.msg(data.msg);
                        }
                    });
                    break;
            }
        }
    );

    //监听行工具事件
    table.on('tool(userList)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'edit') {
            var url = "/users/showEdit/" + data.userId;
            layer.open({
                type: 2,
                title: ["修改用户", "color:red;"],//不显示标题可以设置false
                closeBtn: 1,//0代表不显示右上角关闭按钮
                shadeClose: false,
                area: ['50%', '60%'],
                content: url,
            });
        } else if (layEvent === 'del') {
            if (data.length === 0) {
                layer.msg('请选择一行');
            } else {
                layer.confirm('真的删除此用户吗？删除之后用户状态会变为不可用，请三思...', function (index) {
                    // obj.del(); //删除对应行（tr）的DOM结构 #}
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/users/del/',
                        data: {
                            id: data.userId
                        },
                        type: 'POST',
                        success: function (data) {
                            if (data.code === 0) {
                                window.location.reload();//刷新页面
                            }
                            layer.msg(data.msg);
                        }
                    });
                });
            }
        }
    });

});

